<template>
    <div class="box">
        <div class="box-login">
            <div class="wrap">
                <!-- 第一行 -->
                <div class="tab">
                    <span @click="changeTab(1)" class="tab-btn" :class="type == 1 ? 'selection-tab' : ''">账号登录</span>
                    <span @click="changeTab(2)" class="tab-btn" :class="type == 2 ? 'selection-tab' : ''">扫码登录</span>
                </div>
                <!-- 第二行内容区域 账号登录框或者二维码 -->
                <div class="content">
                    <div class="account">
                        <el-input v-model="user.username" placeholder="请输入登录账号" class="rows" />
                        <el-input v-model="user.password" type="password" placeholder="请输入密码" class="rows" show-password />
                        <!-- 自动登录等按钮，先预留 -->
                        <div class="tips"></div>
                        <div class="btn-box">
                            <el-button class="button" type="primary" round @click="login">登录</el-button>
                        </div>
                    </div>
                </div>
                <!-- 快速登录按钮 及隐私政策-->
                <div class="foot"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang = "ts">
import { ref, reactive } from 'vue'
import { CacheUserUtil } from '@/assets/js/utils/CacheUserUtil'
import type { IUser } from '@/assets/js/utils/entity/IUser'
import { useRouter } from 'vue-router'
import { login as _login } from '@/api/login/index'
import type { HttpResponse } from '@/assets/js/utils/entity/HttpResponse'

const type = ref<number>(1)

const user = reactive<IUser>({
    username: 'user',
    password: '123456789'
})

const changeTab = (t: number) => {
    type.value = t
}

const router = useRouter()

const login = async () => {
    const res: HttpResponse = await _login(user) as unknown as HttpResponse
    if (res.ok) {
        // 登录成功
        const token = res.data.access_token
        const refreshToken = res.data.refresh_token
        CacheUserUtil.setToken(token)
        CacheUserUtil.setRefreshToken(refreshToken)
    }
    router.push('/portal')
}

</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(45, 50, 51);

    &-login {
        width: 350px;
        height: 450px;
        border-radius: 10px;
        padding: 15px;
        background-color: #fff;

        .wrap {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .tab {
                width: 100%;
                height: 50px;
                display: flex;

                &-btn {
                    padding: 0px 15px;
                    font-size: 20px;
                    font-weight: bold;
                    color: rgb(120, 125, 130);
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .selection-tab {
                    color: red;
                    cursor: default !important;
                }
            }

            .content {
                flex: 1;

                .account {
                    width: 100%;
                    height: 100%;

                    .rows {
                        width: 100%;
                        margin-top: 25px;
                        height: 50px;
                        font-size: 20px;

                        .el-input__wrapper {
                            background-color: rgb(242, 242, 242) !important;
                        }
                    }

                    .tips {
                        width: 100%;
                        height: 50px;
                    }

                    .btn-box {
                        width: 100%;
                        height: 50px;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .button {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .foot {
                width: 100%;
                height: 120px;
            }
        }
    }
}
</style>